import React from 'react';
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util,
} from 'bizcharts';
import DataSet from '@antv/data-set';
import { RadioChangeEvent } from 'antd/lib/radio';

class Donut extends React.Component {
  render() {
    const {
      data,
      donutClick,
      title,
      date,
      // xWidth: xWidth,
      // yMax:yMax,
      // xMin:xMin,
      // xLineValue:xLineValue,
      // fallX:fallX,
      // x20:x20,
      // x80:x80,
    } = this.props;

    const { DataView } = DataSet;
    const { Html } = Guide;

    const dv = new DataView();
    dv.source(data).transform({
      type: 'percent',
      field: 'count',
      dimension: 'item',
      as: 'percent',
    });
    const sss = `<div style='color:#444444;font-size:66%;text-align: center;width: 8em;'>${title}<br><span style='color:#262626;font-size:80%;font-weight:'bold'>${date}</span></div>`;
    const cols = {
      percent: {
        formatter: val => {
          val = `${val * 100}%`;
          return val;
        },
      },
    };
    return (
      <div>
        <Chart
          height={500}
          data={dv}
          scale={cols}
          onPlotClick={ev => {
            const point = {
              x: ev.x,
              y: ev.y,
              data: ev.data,
            };
            console.log(point);
            if (donutClick) {
              donutClick(ev.data);
            }
          }}
          padding={[0, window.innerWidth / 4, 10, 0]}
          forceFit
        >
          <Coord type="theta" radius={0.75} innerRadius={0.6} />
          <Axis name="percent" />
          <Legend
            position="right-center"
            // offsetY={-window.innerHeight / 2 + 180}
            offsetX={-window.innerWidth / 10}
            // offsetY={-400 / 2 +100}
            clickable={false}
            itemFormatter={val => {
              const obj = new Array();
              for (let i = 0; i < data.length; i++) {
                obj[data[i].item] = `  ${parseFloat(`${data[i].count}`).toFixed(2)}%`;
              }
              return val + obj[val];
            }}
          />
          <Tooltip
            showTitle={false}
            itemTpl='<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
          />
          <Guide>
            <Html position={['50%', '50%']} html={sss} alignX="middle" alignY="middle" />
          </Guide>
          <Geom
            type="intervalStack"
            position="percent"
            color="item"
            tooltip={[
              'item*percent',
              (item, percent) => {
                percent = `${parseFloat(`${percent * 100}`).toFixed(2)}%`;
                return {
                  name: item,
                  value: percent,
                };
              },
            ]}
            style={{
              lineWidth: 1,
              stroke: '#fff',
            }}
          >
            {/* <Label */}
            {/*  content="percent" */}
            {/*  formatter={(val, item) => { */}
            {/*    return item.point.item + ": " + val; */}
            {/*  }} */}
            {/* /> */}
          </Geom>
        </Chart>
      </div>
    );
  }
}

export default Donut;
